<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header">
    <div th:include="include::file"></div>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal s" id="form-file-add" name="form-file-add" method="POST"
          enctype="multipart/form-data" > <!--method="POST"  enctype="multipart/form-data">-->
        <div class="form-group">
            <label class="col-sm-3 control-label">文件名称：</label>
            <div class="col-sm-8">
                <input id="fileName" name="fileName"  class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">文件：</label>
            <div class="col-sm-8">
                <div class="file-loading" style="width: 80%">
                    <input id="files" class="file" name="file" type="file" data-show-upload="false" 
                           data-show-Cancel="false" data-theme="fas">
                </div>
            </div>
        </div>
       
    </form>
</div>
<script type="text/javascript">
    var content = "";
    var types = "image";//默认图片
    var fileTypes = "image";//默认类型
    //初始化插件基础信息
    $("#files").fileinput({
        language: 'zh',
        maxFileCount: 1,
        uploadUrl:"",
        dropZoneEnabled: false,
        showPreview:true,
        showCaption: false,
        showUpload:true,
        allowedFileExtensions: ['jpg', 'png', 'jpeg', "gif"],
        initialPreviewAsData: true,
        overwriteInitial: true,
        layoutTemplates: {
        	 actionDelete:'', //去除上传预览的缩略图中的删除图标
             actionUpload:'',//去除上传预览缩略图中的上传图片；
             actionZoom:''
        },
        previewSettings: {
            image: {width: "200px", height: "200px"},
        }
    })
</script>
<div th:include="include::footer"></div>
<script th:inline="javascript">
    //var prefix = "http://localhost:80" + "/system/banner";
    var prefix = basePath + "/system/banner";
    $("#form-file-add").validate({
        rules: {
        	file: {
                required: true
            },
            fileName :{
            	required: true
            }
        },
        messages: {
            file: {
            	required: "请添加文件"
            },
            fileName :{
            	required: "请输入文件名"
            }
        }
    });

    function submitHandler() {
    	 var form = new FormData();
        if ($.validate.form()) {
        	   form.append("bannerName", $("#fileName").val());
               var file = document.getElementById("files").files[0];
                form.append("file", file);
                $.ajax({
                    url: prefix + "/save",
                    data: form,
                    type: "POST",
                    dataType: "json",
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        $.operate.saveSuccess(result);
                    }
             }); 
        }
       
    }

</script>
</body>
</html>
